/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '牢大'
function getBooksList() {
    axios({
        url: 'https://hmajax.itheima.net/api/books',
        params: {
            creator
        }
    }).then(result => {
        const bookList = result.data.data
        const htmlstr = bookList.map((item, index) => {
            return `
                <tr>
          <td>${index + 1}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td data-id='${item.id}'>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
            `
        }).join('')
        document.querySelector('.list').innerHTML = htmlstr
    })
}
getBooksList()

/**
 * 新增图书
 */
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)

const add_btn = document.querySelector('.add-btn')
add_btn.addEventListener('click', () => {
    const addForm = document.querySelector('.add-form')
    const addBook = serialize(addForm, { hash: true, empty: true })
    const { bookname, author, publisher } = addBook
    if (!bookname || !author || !publisher) {
        return alert("输入不能为空！")
    }
    axios({
        url: 'https://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
            bookname,
            author,
            publisher,
            creator
        }
    }).then(result => {
        addForm.reset()
        getBooksList()
        addModal.hide()
    })
})


/**
 * 删除图书
 */
const bookList = document.querySelector('.list')
bookList.addEventListener('click', e => {
    if (e.target.classList.contains('del')) {
        const is_delete = confirm('是否删除该图书')
        if (is_delete) {
            const theId = e.target.parentNode.dataset.id
            axios({
                url: `https://hmajax.itheima.net/api/books/${theId}`,
                method: 'DELETE'
            }).then(result => {
                getBooksList()
            })
        }
    }
})

/**
 * 编辑图书
 */
//1.显示弹窗
const editModalDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editModalDom)

bookList.addEventListener('click', e => {
    if (e.target.classList.contains('edit')) {
        const theId = e.target.parentNode.dataset.id
        axios({
            url: `https://hmajax.itheima.net/api/books/${theId}`
        }).then(res => {
            const keys = Object.keys(res.data.data)
            keys.forEach(key => {
                document.querySelector(`.edit-form .${key}`).value = res.data.data[key]
            })
            console.log(res);
        })
        editModal.show()
    }
})

const edit_btn = document.querySelector('.edit-btn')
edit_btn.addEventListener('click', () => {
    const editForm = document.querySelector('.edit-form')
    const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
    if (!bookname || !author || !publisher) {
        return alert("输入不能为空！")
    }
    axios({
        url: `https://hmajax.itheima.net/api/books/${id}`,
        method: 'PUT',
        data: {
            bookname,
            author,
            publisher,
            creator
        }
    }).then(result => {
        getBooksList()
    })
    editModal.hide()
})